﻿<div class="ld-tabs">
    <ul>
        <li class="k-state-active">客户所有交易统计表</li>
        <li>导出对帐单</li>
    </ul>
    <div>
        <div class="k-block divToolbar">
            <div style="display: inline-block">
                <select id="ddlSelType">
                    <option value="0">全部</option>
                    <option value="1">顾客</option>
                    <option value="2">供应商</option>
                </select>
            </div>
            <div style="display: inline-block; vertical-align: top">
                <select id="txtCategories" style="width: 200px;"></select>
            </div>
            <span class="k-textbox k-space-right" style="vertical-align: top">
                <input type="text" placeholder="请输入关键字" id="txtKey" />
                <a href="javascript:FilterCustomers()" class="k-icon k-i-search">&nbsp;</a>
            </span>
        </div>
        <div id="grid_customer" style="text-align: center"></div>
    </div>
    <div>
        <div class="k-block divToolbar">
            <div style="display: inline-block; vertical-align: top">
                <input id="txtCustomer" data-value="0" style="width: 400px" />
            </div>
            <div style="display: inline-block;">
                <input id="txtOrderDateBefore" class="date" placeholder="开始时间" />
            </div>
            --
            <div style="display: inline-block;">
                <input id="txtOrderDateAfter" class="date" placeholder="结束时间" />
            </div>
            <a class="k-button" onclick="ExportBill()"><span class="k-icon k-i-restore"></span><span>导出对帐单</span></a>
        </div>
        <form action="/Financial/Payment/ExportBill" method="post" target="_blank" style="display: none" id="fmBill">
            <input type="hidden" name="customerID" id="df_CustomerID" />
            <input type="hidden" name="orderDateBefore" id="df_OrderDateBefore" />
            <input type="hidden" name="orderDateAfter" id="df_OrderDateAfter" />
            <input type="hidden" name="orderStatus" id="df_OrderStatus" value="1,3,5,8,10" />
        </form>
    </div>
</div>

<script class="init">
    LocatedMenu("财务管理", "交易统计");

    $("#txtCategories").kendoMultiSelect({
        placeholder: "请选择所属分类...",
        dataTextField: "CategoryName",
        dataValueField: "ID",
        dataSource: Whale.dataSource({
            url: "/Members/CustomerCategory/GetCategories"
        }),
        change: function (e) {
            //console.log(this.value().join(','));
            FilterCustomers();
        }
    });
    $(".date").kendoDatePicker({
        culture: "zh-CHS",
        format: "yyyy年MM月dd日"
    });
</script>

<script class="grid_customer_columns">
    $("#ddlSelType").kendoDropDownList({
        change: function (e) {
            FilterCustomers();
        }
    });
    var customerFields = [{
        title: "客户",
        field: "ComplexName",
        width: 300,
        attributes: { style: "text-align:left" }
    }, {
        title: "应付",
        field: "Due",
        format: "{0:c}",
        width: 120,
        attributes: { style: "text-align:right" }
    }, {
        title: "已付",
        field: "Paid",
        format: "{0:c}",
        width: 120,
        attributes: { style: "text-align:right" }
    }, {
        title: "未付",
        field: "UnPaid",
        format: "{0:c}",
        width: 120,
        attributes: { style: "text-align:right" }
    }, {
        title: "帐户余额",
        field: "Balance",
        format: "{0:c}",
        width: 120,
        attributes: { style: "text-align:right" }
    }, {}];
</script>

<script class="grid_config">
    $(function () {
        $("#grid_customer").kendoGrid({
            columns: customerFields,
            dataSource: Whale.dataSource({
                url: "/Members/Customer/Gets",
                getParameters: function () {
                    return {
                        key: $.trim($("#txtKey").val()),
                        getCategory: true,
                        cType: $("#ddlSelType").data("kendoDropDownList").value(),
                        categories: $("#txtCategories").data("kendoMultiSelect").value().join(','),
                        getBalance: true,
                        getDealStatistic: true
                    };
                },
                pageSize: 20

            }),
            pageable: {
                messages: {
                    empty: "暂无数据"
                }
            },
            dataBound: function (e) {
                //让表头居中
                $("th.k-header").attr("style", "text-align:center; font-weight:bold;");
            }
        });
    });

    function FilterCustomers() {
        $("#grid_customer").data("kendoGrid").dataSource.page(0);
        $("#grid_customer").data("kendoGrid").dataSource.read();
    }
</script>

<script class="customers">
    var allCustomer = Whale.Remote.GetEntity({
        url: "/Members/Customer/Gets",
        parameters: {
            cType: 1,
            customerStatus: 1
        }
    });

    $("#txtCustomer").kendoComboBox({
        placeholder: "请选择客户...",
        filter: "contains",
        dataTextField: "SearchLabel",
        template: "#=ComplexName#",
        dataValueField: "ID",
        dataSource: allCustomer,
        select: function (e) {
            var item = this.dataItem(e.item.index());
            $("#txtCustomer").attr("data-value", item.ID);
        },
        change: function (e) {
            var item = this.dataItem();
            if (item != undefined) {
                this.text(item.ComplexName);
            } else {
                var b = true;
                var obj = this;
                $.each(allCustomer, function (i, o) {
                    if (obj.text() == o.ComplexName) {
                        b = false;
                    }
                });
                if (b) {
                    this.text("");
                    $("#txtCustomer").attr("data-value", "0");
                }
            }
        }
    });
</script>

<script class="bill">
    function ExportBill() {
        $("#df_CustomerID").val($("#txtCustomer").attr("data-value"));
        $("#df_OrderDateBefore").val($("#txtOrderDateBefore").val());
        $("#df_OrderDateAfter").val($("#txtOrderDateAfter").val());
        $("#fmBill").submit();
    }
</script>
